<template>
    <el-row
        v-loading="loading"
        type="flex"
        justify="center"
        align="middle"
        :style="{height:screenHeight}"
    >
        <el-row style="width:300px">
            <el-form
                ref="loginForm"
                :model="loginForm"
                :rules="loginRules"
                status-icon
                size="medium"
            >
                <el-form-item>
                    <el-row
                        type="flex"
                        justify="center"
                        align="middole"
                    >
                        <div :class="$style.login_title">
                            <h1>登录</h1>
                        </div>
                    </el-row>
                </el-form-item>
                <el-form-item
                    label="用户名"
                    prop="username"
                >
                    <el-input
                        v-model="loginForm.username"
                        name="username"
                        auto-complete="on"
                    />
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                >
                    <el-input
                        type="password"
                        name="password"
                        v-model="loginForm.password"
                        @keyup.enter.native="handleLogin('loginForm')"
                        auto-complete="on"
                    />
                </el-form-item>
                <el-form-item />
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="handleLogin('loginForm')"
                    >
                        登录
                    </el-button>
                </el-form-item>
                <!-- <hr>
                <el-row
                    type="flex"
                    justify="end"
                >
                    <div :class="$style.forgetPassword">
                        <a href="#">忘记密码</a>
                    </div>
                </el-row> -->
            </el-form>
        </el-row>
    </el-row>
    <!-- </div> -->
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            loading: false,
            screenHeight: window.innerHeight - 50 + "px",
            loginForm: {
                username: "",
                password: ""
            },
            loginRules: {
                username: [
                    {
                        type: "string",
                        pattern: /^\w{4,16}$/,
                        message: "用户名称必须是4-16位的英文字母或数字",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        type: "string",
                        // pattern: /^[a-zA-Z]\w{5,17}$/,
                        pattern: /^\w{4,16}$/,
                        message: "用户密码必须是4-16位的英文字母或数字",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请输入用户密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        handleLogin(loginForm) {
            this.$refs[loginForm].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store
                        .dispatch("login", this.loginForm)
                        .then(res => {
                            let that = this;
                            that.loading = false;
                            setTimeout(function() {
                                that.$router.push({
                                    path: "/index"
                                });
                            }, 1500);
                            return true;
                        })
                        .catch(err => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    mounted() {
        const that = this;
        window.onresize = () => {
            return (() => {
                that.screenHeight = window.innerHeight - 50 + "px";
            })();
        };
    }
};
</script>

<style lang='scss' scoped module>
.login-panel {
    width: 400px;
}
.login_title {
    font-size: 16px;
    color: #63b0f2;
}
.forgetPassword {
    font-size: 12px;
    color: #63b0f2;
}
</style>
